<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="s" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<%@ taglib uri="/WEB-INF/shopizer-tags.tld" prefix="sm" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<%@ page session="false" %>

<!--/.row-->

<div class="container-breadcrumb">
    <div class="row ">
        <div class="col-sm-12">
            <ol class="breadcrumb">
                <li><a href="${pageContext.request.contextPath}/"><span class="glyphicon glyphicon-home"></span></a>
                </li>
                <li><a href="${pageContext.request.contextPath}/categories/categories"><s:message
                        code="menu.catalogue-categories" text="product"/></a></li>
                <li class="active">
                    <c:choose>
                        <c:when test="${category.id!=null && category.id>0}">
                            <s:message code="label.category.editcategory" text="Edit category"/>
                        </c:when>
                        <c:otherwise>
                            <s:message code="label.category.createcategory" text="Create category"/>
                        </c:otherwise>
                    </c:choose>
                </li>
            </ol>
        </div>
    </div>
    <!--/.row-->
</div>

<div id="container-content" class="container-content">
    <div class="panel panel-default">
        <div class="panel-heading">
            <c:choose>
                <c:when test="${category.id!=null && category.id>0}">
                    <s:message code="label.category.edit" text="Edit category"/> <c:out
                        value="${category.code}"/>
                </c:when>
                <c:otherwise>
                    <s:message code="label.category.create" text="Create category"/>
                </c:otherwise>
            </c:choose>
        </div>
        <c:url var="categorySave" value="/categories/save?lv=${lv}"/>
        <form:form id="myForm" method="POST" cssClass="form-horizontal" enctype="multipart/form-data"
                   commandName="category" action="${categorySave}">
            <div class="panel-body">
                <form:errors path="*" cssClass="alert alert-warning" element="div"/>
                <div id="store.success" class="alert alert-success" style="
                <c:choose>
                <c:when test="${success!=null}">display:block;</c:when>
                <c:otherwise>display:none;</c:otherwise></c:choose>"><s:message code="message.success"
                                                                                text="Request successfull"/></div>
                <c:if test="${lv > 1}">
                    <div class="form-group">
                        <label class="col-sm-2 control-label"><s:message code="label.category.parentcategory"
                                                                         text="Category vsible"/></label>

                        <div class="col-sm-6">
                            <s:message code="label.category.root" text="Root" var="rootVar"/>
                            <form:select path="parent.id" cssClass="form-control">
                                <form:options items="${categories}" itemValue="id"
                                              itemLabel="name"/>
                            </form:select>
                            <span class="help-inline"><form:errors path="parent.id" cssClass="error"/></span>
                        </div>
                    </div>
                </c:if>

                <div class="form-group">
                    <label class="col-sm-2 control-label"><s:message code="label.category.code"
                                                                     text="Category code"/></label>

                    <div class="col-sm-6">
                        <c:if test="${category.id!=null && category.id>0}">
                            <c:set value="true" var="disable"/>
                        </c:if>
                        <form:input cssClass="form-control" path="code" readonly="${disable}"/>
                        <span class="help-inline"><div id="checkCodeStatus" style="display:none;"></div><form:errors
                                path="code" cssClass="error"/></span>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-2 control-label"><s:message code="label.productedit.categoryname"
                                                                     text="Category name"/></label>

                    <div class="col-sm-6">
                        <form:input cssClass="form-control" id="name"
                                    path="name"/>
                            <span class="help-inline"><form:errors path="name"
                                                                   cssClass="error"/></span>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-2 control-label"><s:message code="label.category.status"
                                                                     text="Category Status"/></label>

                    <div class="col-sm-6">
                        <form:select path="categoryStatus" cssClass="form-control">
                            <c:forEach items="${categoryStatus}" var="cs">
                                <form:option value="${cs}" label="${cs.value}"/>
                            </c:forEach>
                        </form:select>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-2 control-label">权重</label>

                    <div class="col-sm-6">
                        <form:input id="order" cssClass="form-control" path="sortOrder"/>
                        <span class="help-inline"><form:errors path="sortOrder" cssClass="error"/></span>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-2 control-label"><s:message code="label.category.edit.title"
                                                                     text="Title"/></label>
                    <div class="col-sm-6">
                        <form:input id="title" cssClass="form-control" path="title"/>
                        <span class="help-inline"><form:errors path="title"
                                                               cssClass="error"/></span>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-2 control-label"><s:message code="label.categories.keywords"
                                                                     text="Keywords"/></label>

                    <div class="col-sm-6">
                        <textarea cols="30" id="title" class="ckeditor form-control"
                                  name="metatagKeywords">${category.metatagKeywords}</textarea>
                            <%--<form:input id="title" cssClass="form-control" path="description.metatagKeywords"/>--%>
                        <span class="help-inline"><form:errors path="metatagKeywords"
                                                               cssClass="error"/></span>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-2 control-label"><s:message code="label.category.categorydescription"
                                                                     text="Category description"/></label>

                    <div class="col-sm-6">

                        <textarea cols="30" id="descriptions.metatagDescription" class="ckeditor form-control"
                                  name="description">${category.description}</textarea>

                    </div>
                </div>

                <form:hidden path="id"/>
            </div>
            <div class="panel-footer">
                <button type="submit" class="btn btn-success"><s:message code="button.label.submit"
                                                                         text="Submit"/></button>
            </div>
        </form:form>
    </div>
</div>

<script type="text/javascript">

    $(function () {
        $('#order').numeric();
        $('#myForm').bootstrapValidator({
//        live: 'disabled',
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                "code": {
                    group: '.col-sm-6',
                    validators: {
                        notEmpty: {
                            message: '<s:message code="label.category.code" />不能为空'
                        },
                        regexp: {
                            regexp: /^[a-zA-Z0-9_\.]+$/,
                            message: '<s:message code="label.category.code" />错误，只允许字母,数字,_'
                        }
                    }
                },
                "name": {
                    group: '.col-sm-6',
                    validators: {
                        notEmpty: {
                            message: '<s:message code="label.productedit.categoryname" />不能为空'
                        }
                    }
                },
                "seUrl": {
                    group: '.col-sm-6',
                    validators: {
                        notEmpty: {
                            message: '<s:message code="label.content.friendlyurl" />不能为空'
                        }
                    }
                }
            }
        });
    });
//    $(".btn-upload").click(function () {
//        var id = $(this).data("upload");
//        if (id == 'themeImage') {
//            $("#" + id).click();
//        } else {
//            $("#image").click();
//        }
//
//    });
    //上传图片

//    $(".input-file").change(function (evt) {
//        var name = $(this).attr("name");
//        var files = evt.target.files;
//        if (name == 'themeImage') {
//            var $uploadTarget = $("#img_" + name);
//        } else {
//            var $uploadTarget = $("#img_category");
//        }
//
//        for (var i = 0; i < files.length; i++) {
//            var f = files[i];
//            if (!(f.type.indexOf("image") == 0)) {
//                alert(f.name + "不是图片类型!");
//                continue;
//            }
//            var reader = new FileReader();
//            reader.onload = (function (filetemp) {
//                return function (e) {
//                    $uploadTarget.attr("src", e.target.result);
//                }
//            })(f);
//            reader.readAsDataURL(f);
//        }
//    });

</script>